<template>
  <div class="playlist">
    <div class="bannerWrap" v-if="isShowBannerWrap">
      <div class="bannerWrapLeft">
        <i class="iconfont icon-tipvip"></i>
        <span>含6首VIP专享歌曲</span>
      </div>
      <div class="bannerWrapRight">
        <span>首开VIP仅5元</span>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </div>
    </div>
    <div class="playlist-wrap">
      <div class="playlist-top">
        <div class="left">
          <i class="iconfont icon-boshiweb_bofang"></i>
          <div>
            <div class="title">播放全部</div>
            <div class="num">(共{{ playlist.tracks.length }}首)</div>
          </div>
        </div>
        <div class="right">
          <i class="iconfont icon-jiahao_o"></i>
          <span>收藏 ({{ playlist.subscribedCount }})</span>
        </div>
      </div>
      <div class="playlist-content">
        <div class="playlist-item" v-for="(item, i) in playlist.tracks" :key="i">
          <div class="left">
            <div class="index">{{ i + 1 }}</div>
            <div class="content">
              <div class="title">{{ item.name }}</div>
              <div class="author">
                <div class="tags">
                  <span>SQ</span>
                </div>
                <template v-if="item.ar.length >= 2">
                  <span v-for="(ar, j) in item.ar" :key="j">{{ ar.name + ((item.ar.length - 1) == j ? "" : "/")}}</span>
                </template>
                <span v-else>{{ item.ar[0].name }}</span>
                <span>-{{ item.al.name }}</span>
              </div>
            </div>
          </div>
          <div class="right">
            <i class="iconfont icon-boshiweb_bofang"></i>
            <i class="iconfont icon-gengduo"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "playList",
  props: ["playlist"],
  setup(props) {
    console.log(props);
    let isShowBannerWrap = ref(true);

    return { isShowBannerWrap };
  },
};
</script>

<style lang="less" scoped>
.playlist {
  background-color: #e3e2e0;
  border-top-left-radius: 0.35rem;
  border-top-right-radius: 0.35rem;
  margin-top: 0.3rem;
  .bannerWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.3rem;

    .bannerWrapLeft {
      display: flex;
      align-items: center;

      span {
        font-size: 0.3rem;
        margin-left: 0.25rem;
      }

      .icon-tipvip {
        color: #e77b7d;
        font-size: 0.4rem;
      }
    }

    .bannerWrapRight {
      display: flex;
      align-items: center;
      font-size: 0.26rem;
      color: #939495;

      .icon-xiangyoujiantou {
        font-size: 0.24rem;
      }
    }
  }

  .playlist-wrap {
    background-color: #fff;
    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;

    .playlist-top {
      display: flex;
      justify-content: space-between;
      padding: 0.1rem 0.1rem 0 0.3rem;

      .left {
        display: flex;
        justify-content: center;
        align-items: center;

        .icon-boshiweb_bofang {
          font-size: 0.45rem;
        }

        > div {
          display: flex;
          // align-items: center;
          .title {
            font-size: 0.3rem;
            font-weight: 500;
            margin-left: 0.2rem;
          }

          .num {
            font-size: 0.25rem;
            color: #c9c8c6;
          }
        }
      }

      .right {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.2rem;
        background-color: #fe3a3c;
        border-radius: 0.5rem;
        color: #eee;
        font-size: 0.26rem;

        > span {
          margin-left: 0.1rem;
        }
      }
    }

    .playlist-content {
      padding: 0 0.4rem;
      .playlist-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem 0;
        .left {
          flex: 1;
          display: flex;
          align-items: center;

          .index {
            color: #939495;
            width: 0.55rem;
          }
          .content {
            // margin-left: 0.4rem;
            font-size: 0.28rem;
            white-space: nowrap;

            .author {
              display: flex;

              .tags {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                transform: scale(0.6);
                transform-origin: center;
                >span {
                  font-size: 0.2rem;
                  color: #fe3a3c;
                  padding: 0.01rem 0.1rem;
                  border: 1px solid #fe3a3c;
                  border-radius: 0.05rem;
                }
              }

              span {
                font-size: 0.24rem;
                color: #c9c8c6;
              }
            }
          }
        }

        .right {
          .iconfont {
            color: #c9c8c6;
            font-size: 0.5rem;
            margin-left: 0.1rem;
          }
        }
      }
    }
  }
}
</style>
